<template>
    <!-- key就是防止组件缓存导致编辑器不能正常使用，每次切换来都更改key,使其重新渲染 -->
    <editor v-model='localContent' :init='init' :key="tinymceFlag"></editor>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/media'
import "tinymce/plugins/code"
let Base64 = require('js-base64').Base64;

export default {
  name: 'Ltinymce',
  props:{
      height:{
          type:[Number,String],
          default:500
      },
      width:{
          type:[Number,String],
          default:800
      },
      content:String,
      model:{
        type:Object,
        default:()=>{}
      },
      form:{
        type:Object,
        default:()=>{}
      },
      field:String,
      //默认是否BASE64加密解密
      isBase64:{
        type:Boolean,
        default:true
      }
  },
  watch:{
    localContent(){
      if(this.isBase64){
        this.model[this.field]=Base64.encode(this.localContent)
      }else{
        this.model[this.field]=this.localContent
      }
     
    },
    content(){
        this.localContent = Base64.decode(this.content)
    }
   
  },
  created() {
      this.initData()
  },
  data () {
    return {
      tinymceFlag:1,
      localContent:this.content,
      init: {
        file_picker_types: 'image media',//运行上传本地图片和视频
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: this.height,
        width:this.width,
        plugins: 'link lists image media table colorpicker textcolor contextmenu code',
        toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image media | removeformat code',
        branding: false,
        // 避免图片地址和链接地址转换成相对路径
        relative_urls: false, 
        remove_script_host: false,
        convert_urls: false,
        //图片上传，只有配置这个函数才会出现本地上传图片
        /*
        images_upload_handler: (blobInfo, success, failure) => {
          this.handleImgUpload(blobInfo, success, failure)
        },
        */
      }
    }
  },
  mounted () {
    tinymce.init({})
    this.tinymceFlag++;
  },
  destroyed(){
    tinymce.remove()
  },
  components: {Editor},
  methods:{
      initData(){
        if(this.localContent && this.isBase64){
          //将数据进行解密
          this.localContent = Base64.decode(this.model[this.field])
        }
      },
      getContent(){
          return this.localContent
      },
      setContent(content){
          this.localContent=content;
      },
      handleImgUpload(blobInfo, success, failure) {

      }

  }
}
</script>